.tree-theme (@base-height, @image, @image-height) {
  @correction: (@image-height - @base-height) / 2;

  .tree-node {
    min-height: @base-height;
    line-height: @base-height;
    margin-left: @base-height + 6;
    min-width: @base-height;
    background-position: -(@image-height * 9 + @correction) -@correction;
    background-repeat: repeat-y;
    background-image: url("@{image}");
  }

  .tree-icon {
    width: @base-height;
    height: @base-height;
    line-height: @base-height;
    background-image: url("@{image}");
  }

  .tree-icon:empty {
    width: @base-height;
    height: @base-height;
    line-height: @base-height;
  }

  .tree-wholerow {
    height: @base-height;
  }

  .tree-last {
    background: transparent;
  }

  .tree-open > .tree-ocl {
    background-position: -(@image-height * 4 + @correction) -@correction;
  }

  .tree-closed > .tree-ocl {
    background-position: -(@image-height * 3 + @correction) -@correction;
  }

  .tree-leaf > .tree-ocl {
    background-position: -(@image-height * 2 + @correction) -@correction;
  }

  .tree-themeicon {
    background-position: -(@image-height * 8 + @correction) -@correction;
  }

  > .tree-no-dots {
    .tree-node,
    .tree-leaf > .tree-ocl {
      background: transparent;
    }

    .tree-open > .tree-ocl {
      background-position: -(@image-height * 1 + @correction) -@correction;
    }

    .tree-closed > .tree-ocl {
      background-position: -@correction -@correction;
    }
  }

  .tree-disabled {
    background: transparent;

    &.tree-hovered {
      background: transparent;
    }

    &.tree-selected {
      background: #efefef;
    }
  }

  .tree-checkbox {
    background-position: -(@image-height * 5 + @correction) -@correction;

    &:hover {
      background-position: -(@image-height * 5 + @correction) -(@image-height * 1 + @correction);
    }
  }

  &.tree-checkbox-selection .tree-selected,
  .tree-checked {
    > .tree-checkbox {
      background-position: -(@image-height * 7 + @correction) -@correction;

      &:hover {
        background-position: -(@image-height * 7 + @correction) -(@image-height * 1 + @correction);
      }
    }
  }

  .tree-anchor {
    line-height: @base-height;
    height: @base-height;

    > .tree-undetermined {
      background-position: -(@image-height * 6 + @correction) -@correction;

      &:hover {
        background-position: -(@image-height * 6 + @correction) -(@image-height * 1 + @correction);
      }
    }
  }

  .tree-checkbox-disabled {
    opacity: 0.8;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'tree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#tree-grayscale"); /* Firefox 10+ */
    -ms-filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  }

  > .tree-striped {
    background-size: auto (@base-height * 2);
  }

  &.tree-rtl {
    .tree-node {
      margin-right: @base-height;
      background-image: url("");
      background-position: 100% 1px;
      background-repeat: repeat-y;
    }

    .tree-last {
      background: transparent;
    }

    .tree-open > .tree-ocl {
      background-position: -(@image-height * 4 + @correction) -(@image-height * 1 + @correction);
    }

    .tree-closed > .tree-ocl {
      background-position: -(@image-height * 3 + @correction) -(@image-height * 1 + @correction);
    }

    .tree-leaf > .tree-ocl {
      background-position: -(@image-height * 2 + @correction) -(@image-height * 1 + @correction);
    }

    > .tree-no-dots {
      .tree-node,
      .tree-leaf > .tree-ocl {
        background: transparent;
      }

      .tree-open > .tree-ocl {
        background-position: -(@image-height * 1 + @correction) -(@image-height * 1 + @correction);
      }

      .tree-closed > .tree-ocl {
        background-position: -@correction -(@image-height * 1 + @correction);
      }
    }
  }

  .tree-themeicon-custom {
    background-color: transparent;
    background-image: none;
    background-position: 0 0;
  }

  .tree-node.tree-loading {
    background: none;
  }

  > .tree-container-ul .tree-loading > .tree-ocl {
    background: url("") center center no-repeat;
  }

  .tree-file {
    background: url("@{image}") -(@image-height * 3 + @correction) -(@image-height * 2 + @correction) no-repeat;
  }

  .tree-folder {
    background: url("@{image}") -(@image-height * 8 + @correction) -(@correction) no-repeat;
  }

  > .tree-container-ul > .tree-node {
    margin-left: 0;
    margin-right: 0;
  }

  // ellipsis
  .tree-ellipsis {
    overflow: hidden;
  }
  // base height + PADDINGS!
  .tree-ellipsis .tree-anchor {
    width: calc(100% - 45px);
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .tree-ellipsis.tree-no-icons .tree-anchor {
    width: calc(100% ~"-" 5px);
  }
}
